<template>
	<div id="container">
		<!-- header -->
		<header>
			<!-- header-icon -->
			<div class="my-headericon">
				<van-icon name="chat-o"  @click="infor()"/>
				<van-icon name="setting-o" @click="set()"/>
			</div>
			<!-- header-img -->
			<div class="my-img">
				<van-image class="my-txpic" round width="70px" height="70px" :src="img" />
				<!-- <van-tag type="primary">贵宾会员</van-tag> -->
				<p class="my-imgp" @click="logreg()">{{this.$store.state.usernames}}</p>
				<div class="my-qd" @click="sign()">
					<van-icon name="completed" />签到</div>
			</div>
			<!-- 会员 -->
			<div class="my-huiyuan">会员俱乐部
				<van-icon name="arrow" />
			</div>
		</header>
		<!-- my-中间 -->
		<div id="content">
			<!-- my-订单中心 -->
			<div class="my-orders">
				<div class="my-ordersp" @click="orders(0)">
					<span class="my-ordersp1">订单中心</span>
					<span class="my-ordersp2">全部
						<van-icon name="arrow" /></span>
				</div>
				<div class="my-orderss">
					<figure @click="orders1(1)">
						<van-icon name="pending-payment" />
						<figcaption>已支付</figcaption>
					</figure>
					<figure @click="orders2(2)">
						<van-icon name="tosend" />
						<figcaption>待支付</figcaption>
					</figure>
					<figure @click="orders3(3)">
						<van-icon name="logistics" />
						<figcaption>待收货</figcaption>
					</figure>
					<figure @click="orders4(4)">
						<van-icon name="underway-o" />
						<figcaption>待评价</figcaption>
					</figure>
					<figure @click="orders5(5)">
						<van-icon name="after-sale" />
						<figcaption>退款/售后</figcaption>
					</figure>					
				</div>
			</div>
			<!-- my-我的钱包 -->
			<div class="my-wallet">
				<p class="my-walletp">我的钱包</p>
				<div class="my-wallets">
					<figure @click="credit()">
						<p my-walletnum>0</p>
						<h5>积分</h5>
						<figcaption>1分=1元</figcaption>
					</figure>
					<figure @click="coupon()">
						<p my-walletnum>0</p>
						<h5>抵用券</h5>
						<figcaption>淘劵享优惠</figcaption>
					</figure>
					<figure @click="gift()">
						<p my-walletnum>0</p>
						<h5>礼包</h5>
						<figcaption>礼品卡充值</figcaption>
					</figure>
					<figure @click="advance()">
						<p my-walletnum>0</p>
						<h5>预付款</h5>
						<figcaption>账户余额</figcaption>
					</figure>
					<figure @click="oudian">
						<p my-walletnum>50</p>
						<h5>鸥点</h5>
						<figcaption>可兑换劵</figcaption>
					</figure>
				</div>
			</div>
			<!--my-content-icons图标 -->
			<div class="my-icons">
				<figure @click="bookmark()">
					<van-icon name="star-o" />
					<figcaption>收藏</figcaption>
				</figure>
				<figure @click="giftconpon()">
					<van-icon name="coupon-o" />
					<figcaption>礼券兑换</figcaption>
				</figure>
				<figure @click="invoices()">
					<van-icon name="description" />
					<figcaption>发票管理</figcaption>
				</figure>
				<figure>
					<van-icon name="service-o" />
					<figcaption>东东客服</figcaption>
				</figure>
				<figure @click="active()">
					<van-icon name="gift-o" />
					<figcaption>我的活动</figcaption>
				</figure>
				<figure @click="bill()">
					<van-icon name="bill-o" />
					<figcaption>我的账单</figcaption>
				</figure>
				<figure @click="advise()">
					<van-icon name="edit" />
					<figcaption>建议反馈</figcaption>
				</figure>
				
			</div>
			
			<!-- my-content足迹历史 -->
			<p class="my-history">·近一个月浏览足迹·</p>
			<p class="my-his2">·一  登录以后才能浏览近期的足迹哟  一·</p>
			
			
			
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Mine',
		data(){
			return{
				img:''
			}
		},
		methods:{
			// 设置
			set(){
				let user=this.$store.state.usernames
				let token=this.$store.state.tokens
				if(user!="注册/登录" && token){
					this.$router.push('/settingafter')
				}else{
					this.$router.push('/setting')
				}
			},
			infor(){
				this.$router.push('/message')
			},
			// 签到
			sign(){
				this.$router.push('/sign')
			},
			// 我的钱包-礼品卡
			gift(){
				this.$router.push('/gift')
			},
			// 我的钱包-积分
			credit(){
				this.$router.push('/credit')
			},
			// 我的钱包-抵用券
			coupon(){
				this.$router.push('/coupon')
			},
			// 我的钱包-预付款
			advance(){
				this.$router.push('/advance')
			},
			// 我的钱包-鸥点
			oudian(){
				this.$router.push('/oudian')
			},
			// 图标-收藏
			bookmark(){
				this.$router.push('/bookmark')
			},
			//图标-礼品兑换
			giftconpon(){
				this.$router.push('/giftconpon')
			},
			// 图标-账单
			bill(){
				this.$router.push('/bill')
			},
			// 图标-发票管理
			invoices(){
				this.$router.push('/invoices')
			},
			// 图标-发票管理
			active(){
				this.$router.push('/active')
			},
			// 图标-发票管理
			advise(){
				this.$router.push('/advise')
			},
			// 登录注册
			logreg(){
				let user=this.$store.state.usernames;
				if(user=="注册/登录"){
					this.$router.push('/login')
				}
			},
			// 订单中心
			orders(id){
				this.$router.push('/orders/'+id)
			},
			orders1(id){
				this.$router.push('/orders/'+id)
			},
			orders2(id){
				this.$router.push('/orders/'+id)
			},
			orders3(id){
				this.$router.push('/orders/'+id)
			},
			orders4(id){
				this.$router.push('/orders/'+id)
			},
			orders5(id){
				this.$router.push('/orders/'+id)
			}
		},
		mounted(){
			let user=this.$store.state.usernames
			let token=this.$store.state.tokens
			if(user!="注册/登录"){
				this.img='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572930040869&di=f28f53accfc15fdff85014d7b3322691&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201809%2F14%2F20180914150259_ScPvi.jpeg'
			}
		}
	}
</script>

<style scoped>
* {
	padding: 0;
	margin: 0;
}
p,figure,figcaption{
	padding: 0;
	margin: 0;
}
/* -----------------------my-header--------------- */
header{
	width: 100%;
	/* background-color: #e93f26; */
	background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573099172544&di=3f20197dc994b192d6c4b9e85ea43634&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F7de04606c475f4cb37f582357fc16599f5d800651e411-RYyVRI_fw658);
	background-size:cover;
	background-position:center;
}
.my-headericon {
	height: 50px;
}
.van-icon-chat-o{
	margin-left: 19px;
	margin-right: 290px;
	/* color:#fff3f7; */
	font-size: 25px;
	line-height: 50px;
}
.van-icon-setting-o{
	/* color:#fff3f7; */
	font-size: 25px;
	line-height:50px;
}
/* my-header-头像 */
.my-img {
	position: relative;
	height: 85px;
}
.my-txpic {
	margin-left: 16px;
	margin-top: 12px;
}
.van-tag {
	height: 19px;
	width: 67px;
	text-align: center !important;
	font-size: 15px;
	position: absolute;
	top: 65px;
	left: 26px;
}
/* 登录、注册、签到 */
.my-imgp {
	position: absolute;
	top: 31px;
	left: 115px;
	font-size: 18px;
	font-family: "楷体";

}
.my-qd {
	width: 80px;
	height: 28px;
	background-color: rgba(0,0,0,0.3);
	font-size: 16px;
	text-align: center;
	line-height: 28px;
	font-family: "楷体";
	color: #fff;
	position: absolute;
	top: 56px;
	left: 110px;
}

/* header-会员 */
.my-huiyuan {
	height: 36px;
	background: rgb(0,0,0,0.3);
	text-align: right;
	color: #fff;
	font-size: 15px;
	font-family: "楷体";
	padding-top: 13px;
	padding-right: 14px;
	box-sizing: borders-box;
}

/*---------------------- my-content----------------------- */
/*--------------------- my-content-订单中心 -----------------*/
.my-orders{
	background-color:#ffffff;
	margin-bottom: 11px;
}
.my-ordersp{
	height: 47px;
	borders-bottom: 2px solid #f3f3f3;
	font-size: 16px;
	font-weight: 600;
}
.my-ordersp1{	
	font-family: "楷体";
	color: #2d2d2d;
	margin-left: 15px;
	line-height: 46px;
}
.my-ordersp2{
	font-family: "楷体";
	color: #666666;
	margin-left: 230px;
	line-height: 46px;
}
/* my-orderss 图标+文字*/
.my-orderss{
	display: flex;
	justify-content: space-between;	
}
.my-orderss figure{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 20%;
}
.my-orderss figure .van-icon{
	font-size: 24px;
	color: #5b5b5b;
	margin-bottom: 20px;
	margin-top: 15px;
}
.my-orderss figure figcaption{
	color: #1e1e1e;
	font-size: 15px;
	font-weight: 600;
	font-family: "楷体";
	margin-bottom: 17px;
}
/*-------------- my-content 我的钱包--------------*/
.my-wallet{
	background-color:#ffffff;
	margin-bottom: 11px;
}
.my-walletp{
	height: 47px;
	line-height: 47px;
	padding-left: 15px;
	box-sizing: borders-box;
	borders-bottom: 2px solid #f3f3f3;
	font-size: 16px;
	font-family: "楷体";
	font-weight: 600;
	color: #2d2d2d;
}
/* 我的钱包-积分 */
.my-wallets{
	display: flex;
}
.my-wallets figure{
	width: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.my-wallets figure p{
	font-size: 16px;
	color: #232323;
	font-family: "楷体";
	font-weight: 600;
	margin-top: 15px;
	margin-bottom: 12px;
}
.my-wallets figure h5{
	font-size: 15px;
	color: #2e2e2e;
	font-family: "楷体";
	font-weight: 600;
	margin-bottom:14px ;
}
.my-wallets figure figcaption{
	font-size: 13px;
	color: #949494;
	font-family: "楷体";
	font-weight: 600;
	margin-bottom: 13px;
}
/* ---------------------my-content-图标------------------ */
.my-icons{
	background-color:#FFFFFF;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 11px;
}
.my-icons figure{
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.my-icons figure .van-icon{
	font-size: 24px;
	margin-top: 14px;
	margin-bottom: 10px;
}
.my-icons figure figcaption{
	font-size:15px;
	font-family: "楷体";
	font-weight: 600;
	margin-bottom: 12px;
}
/* ---------------------my-content足迹history ----------*/
.my-history{
	height:47px;
	background: #fff;
	font-size: 13px;
	font-family: "楷体";
	font-weight: 600;
	text-align: center;
	line-height: 47px;
}
.my-his2{
	height: 55px;
	color: #bbbbbb;
	font-size:10px;
	font-family: "楷体";
	font-weight: 600;
	text-align: center;
	line-height: 55px;
}
</style>
